<template>
  <div>
    <yj-dialog
      :modal="dialog.modal"
      :width="dialog.width"
      :title="dialog.title"
      :dialogVisible="dialog.visible"
      @close="closeDialog"
    >
      <template slot="dialog-content">
        <div
          style="display: flex; justify-content: center; margin-bottom: 50px"
        >
          <el-form
            :model="form"
            :rules="rules"
            ref="userForm"
            size="mini"
            label-width="100px"
          >
            <el-radio v-model="applyStatus" label="FAIL">拒绝</el-radio>
            <el-radio v-model="applyStatus" label="DOING">待审核</el-radio>
            <el-radio v-model="applyStatus" label="SUCCESS">通过</el-radio>
          </el-form>
        </div>

        <div slot="footer" style="text-align: center" class="dialog-footer">
          <el-button size="mini" @click="cancelDialogBtn('userForm')"
            >取 消
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="saveDialogBtn('userForm')"
            >确 定
          </el-button>
        </div>
      </template>
    </yj-dialog>

    <table-frame
      ref="frame"
      :getDataUrl="prop.getDataUrl"
      :removeUrl="prop.removeUrl"
      :searchShow="prop.searchShow"
      :operateShow="prop.operateShow"
      :location="prop.location"
      :searchModel="prop.searchModel"
      :reloadTable="prop.reloadTable"
      :colunmsCount="prop.colunmsCount"
      :showDelBtn="prop.showDelBtn"
      :delBtnPermission="prop.delBtnPermission"
      :that="prop.that"
    >
      <template slot="top_operate" slot-scope="currentRow"> </template>

      <template slot="columns">
        <!--        <el-table-column type="expand">-->
        <!--          <template slot-scope="props">-->

        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="deleted"
          label="是否已删除"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.deleted" size="mini" type="danger"
              >已删除</el-tag
            >
            <el-tag v-else size="mini" type="success">正常</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="deleted"
          label="审核状态"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 'DOING'" size="mini" type="danger"
              >待审核</el-tag
            >
            <el-tag v-if="scope.row.status == 'FAIL'" size="mini" type="danger"
              >审核不通过</el-tag
            >
            <el-tag v-else size="mini" type="success">已发布</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="user"
          label="用户"
        >
          <template slot-scope="scope">
            {{ scope.row.user.realName }}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="newLocation"
          label="定位"
        >
          <template slot-scope="scope">{{
            scope.row.newLocation ? scope.row.newLocation : "-"
          }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="city"
          label="城市"
        >
          <template slot-scope="scope">{{
            scope.row.city ? scope.row.city : "-"
          }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="agreeCount"
          label="点赞数量"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="viewCount"
          label="浏览量"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="commentCount"
          label="评论数量"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="isAnon"
          label="匿名"
        >
          <template slot-scope="scope">
            {{ scope.row.isAnon ? "匿名" : "不匿名" }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="schoolName"
          label="学校"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="content"
          label="文章内容"
        >
          <template slot-scope="scope">
            {{ scope.row.content }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="imgs"
          label="文章图片"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.imgs.length > 0">
              <el-image
                v-for="url in scope.row.imgs"
                fit="cover"
                style="width: 50px; height: 50px"
                :preview-src-list="scope.row.imgs"
                :src="url"
              />
            </template>
            <template v-else> - </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          sortable
          width="150"
          align="center"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          sortable
          align="center"
          width="150"
          label="更新时间"
        ></el-table-column>
      </template>
      <template slot="operate">
        <el-table-column fixed="right" align="center" label="操作" width="100">
          <template slot-scope="scope">
            <auth :code="permission.remove">
              <template slot="auth">
                <el-button
                  class="operate-btn"
                  icon="el-icon-delete"
                  type="text"
                  @click="del(scope.row.articleNo)"
                  size="mini"
                  slot="auth"
                  >删除
                </el-button>
              </template>
            </auth>

            <auth :code="permission.applyStatus">
              <template slot="auth">
                <el-button
                  class="operate-btn"
                  icon="el-icon-setting"
                  type="text"
                  @click="applyStatusFun(scope.row)"
                  size="mini"
                  slot="auth"
                  >审核
                </el-button>
              </template>
            </auth>
          </template>
        </el-table-column>
      </template>
    </table-frame>
  </div>
</template>
<script>
let _this = {};
import searchModel from "./Search.vue";
import utils from "../../../utils/CommonUtils.js";
import formUtils from "../../../utils/form.js";
import { Loading } from "element-ui";

export default {
  data() {
    return {
      applyStatus: "DOING",
      productNo: "",
      dialog: {
        width: "40%",
        title: "审核",
        visible: false,
        modal: true,
      },
      prop: {
        searchShow: true,
        operateShow: true,
        location: " 文章管理 / 文章列表",
        getDataUrl: "/article/pageList",
        removeUrl: "",
        searchModel: searchModel,
        reloadTable: false,
        showDelBtn: false,
        isPage: true,
        delBtnPermission: "",
        that: this,
      },
      CONST: {
        status: { ON: "ON", OFF: "OFF" },
      },
      permission: {
        add: "article:add",
        remove: "article:del",
        update: "article:update",
        applyStatus: "article:update:status",
      },

      URL: {
        remove: "/article/delete/?",
        applyStatus: "/article/update/auditStatus",
      },
    };
  },
  created() {},
  methods: {
    applyStatusFun(row) {
      this.applyStatus = row.status;
      this.productNo = row.articleNo;
      this.dialog.visible = true;
    },
    // 取消
    cancelDialogBtn(userForm) {
      this.dialog.visible = false;
    },

    closeDialog() {
      this.$emit("closeModal", false);
    },

    saveDialogBtn(form) {
      this.$put(this.URL.applyStatus, {
        status: this.applyStatus,
        articleNo: this.productNo,
      }).then((res) => {
        if (res.R) {
          this.$success(res.msg);
          this.dialog.visible = false;
          this.reloadTable();
        }
      });
    },

    reqResult(res) {
      this.dialog.visible = false;
      this.setDataToForm(null);
    },

    reloadTable() {
      _this = this;
      this.prop.reloadTable = true;
      setTimeout(() => {
        _this.prop.reloadTable = false;
      }, 1000);
    },
    del(id) {
      formUtils.delete(
        this,
        this.URL.remove.replace("?", id),
        true,
        "",
        (res) => {
          this.reloadTable();
        }
      );
    },
    monitorRowExpandChange(res) {
      if (res.expand) {
        let loading = Loading.service({});

        loading.close();
      }
    },
  },
};
</script>
<style>
</style>
<style scoped>
.operate-btn {
  margin: 0 5px;
}
</style>
